<template>
  <el-container style="height: 100vh; display: flex; flex-direction: column;">
    <!-- 返回按钮 -->
    <el-button 
      @click="goBack" 
      size="small" 
      type="text" 
      style="color: white; font-size: 16px; display: flex; align-items: center; margin: 20px 0 10px 20px;"
    >
      <i class="el-icon-arrow-left" style="margin-right: 8px;"></i>返回
    </el-button>

    <!-- Main Content -->
    <el-main style="flex: 1; display: flex; justify-content: center; align-items: center; padding: 20px;">
      <el-card style="width: 100%; max-width: 600px; padding: 20px;">
        <div class="feedback-form">
          <el-form :model="feedback" ref="feedbackForm" label-width="100px">
            <!-- 用户输入反馈的文本框 -->
            <el-form-item label="您的反馈">
              <el-input
                type="textarea"
                v-model="feedback.content"
                placeholder="请输入您的宝贵意见"
                rows="6"
                maxlength="500"
                show-word-limit
              />
            </el-form-item>

            <!-- 提交按钮和查看反馈记录按钮（上下排列） -->
            <el-form-item>
              <el-row style="display: flex; flex-direction: column; gap: 10px;">
                <el-col :span="24">
                  <el-button 
                    type="primary" 
                    @click="submitFeedback" 
                    :disabled="!feedback.content.trim()" 
                    style="width: 100%; padding: 12px;"
                  >
                    提交反馈
                  </el-button>
                </el-col>
                <el-col :span="24">
                  <el-button 
                    type="info" 
                    @click="showFeedbacksDialog" 
                    style="width: 100%; padding: 12px;"
                  >
                    查看反馈记录
                  </el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-main>

    <!-- 反馈记录对话框 -->
    <el-dialog 
      title="最近的反馈记录" 
      :visible.sync="dialogVisible" 
      width="600px"
    >
      <div v-if="feedbacks.length === 0">暂无反馈记录</div>
      <!-- 滚动容器 -->
      <div class="feedbacks-container">
        <el-row v-for="(item, index) in feedbacks" :key="index" style="margin-bottom: 15px;">
          <el-col :span="24">
            <el-card>
              <div style="font-size: 14px; color: #666;">
                <p><strong>反馈内容:</strong> {{ item.content }}</p>
                <p><strong>时间:</strong> {{ item.created_at }}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import axios from 'axios'; // 引入 axios

export default {
  name: 'FeedbackView',
  data() {
    return {
      feedback: {
        content: '', // 用户输入的反馈内容
      },
      feedbacks: [], // 用于保存反馈记录
      dialogVisible: false, // 控制对话框是否显示
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1); // 返回上一页
    },

    async submitFeedback() {
      if (this.feedback.content.trim()) {
        try {
          const token = sessionStorage.getItem('jwt_token'); // 从 sessionStorage 获取 JWT token
          if (!token) {
            this.$message.error('未找到有效的身份验证信息！');
            return;
          }

          // 向后端 API 提交反馈内容
          const response = await axios.post('http://localhost:5000/user/feedback', {
            content: this.feedback.content
          }, {
            headers: {
              Authorization: `Bearer ${token}` // 将 token 放入请求头
            }
          });

          console.log("用户的反馈内容：", this.feedback.content);
          this.$message.success(response.data.message); // 显示成功提示
          this.feedback.content = ''; // 清空内容

          // 提交反馈后，刷新反馈记录
          this.getFeedbacks();
        } catch (error) {
          if (error.response && error.response.status === 401) {
            this.$message.error('身份验证失败，请重新登录！');
          } else {
            this.$message.error('提交反馈失败，请稍后再试！'); // 显示错误提示
          }
        }
      } else {
        this.$message.error('请输入反馈内容！');
      }
    },

    async getFeedbacks() {
      try {
        const token = sessionStorage.getItem('jwt_token'); // 从 sessionStorage 获取 JWT token
        if (!token) {
          this.$message.error('未找到有效的身份验证信息！');
          return;
        }

        // 向后端获取反馈记录，最多 5 条
        const response = await axios.get('http://localhost:5000/user/feedback', {
          headers: {
            Authorization: `Bearer ${token}` // 将 token 放入请求头
          }
        });

        // 使用正确的路径来访问反馈记录
        this.feedbacks = response.data.feedbacks.slice(0, 5); // 只保留最新的 5 条反馈记录
        console.log(this.feedbacks);  // 打印反馈记录，确认数据结构是否正确
      } catch (error) {
        this.$message.error('获取反馈记录失败，请稍后再试！');
      }
    },

    // 格式化时间（后端已经处理了时间格式化，不需要在前端再处理）
    formatDate(date) {
      return date; // 后端已经返回格式化的时间，直接显示即可
    },

    // 显示反馈记录的对话框
    showFeedbacksDialog() {
      this.dialogVisible = true;
      this.getFeedbacks(); // 获取反馈记录
    }
  },
};
</script>

<style scoped>
.feedback-form {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-button {
  padding: 12px;
}

.el-input__inner {
  border-radius: 8px;
}

.el-button i {
  font-size: 20px;
}

/* 反馈记录的样式 */
.el-card {
  margin-top: 20px;
}

.el-row {
  margin-bottom: 15px;
}

.el-card h3 {
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: bold;
}

.el-card p {
  font-size: 14px;
  color: #666;
}

.dialog-footer {
  text-align: center;
}

/* 滚动区域样式 */
.feedbacks-container {
  max-height: 400px; /* 设置最大高度 */
  overflow-y: auto; /* 启用纵向滚动 */
  margin-top: 20px;
}
</style>
